<template>
  <div>
    <!-- 多元素动画和单元素动画区别
          1：用transition-grou[包住]
          2：加入key(动画元素都要加key)
     -->
    <button @click="bol=!bol">切换</button>
    <transition-group name="xxx">
      <div v-for="item in 5" v-show="bol" :key="item" class="box" />
    </transition-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bol: true
    }
  }
}
</script>
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: #f00;
}
.xxx-enter-active{
    /* transition:属性  时长  曲线  延时 */
    transition: all 0.5s;
}
.xxx-enter{
    width: 0;
    height: 0;
    opacity: 0;
}
.xxx-leave-active{
    transition: all 0.5s;
}
.xxx-leave-active:nth-child(2){
    transition-delay: 0.2s;
}
.xxx-leave-active:nth-child(3){
    transition-delay: 0.4s;
}
.xxx-leave-active:nth-child(4){
    transition-delay: 0.6s;
}
.xxx-leave-active:nth-child(5){
    transition-delay: 0.8s;
}
.xxx-leave-to{
    width: 0;
    height: 0;
    opacity: 0;
}
</style>
